<template>
	<u-modal :show="show" :showConfirmButton="false" :show-title="false">
		<view class="u-flex u-flex-col  w-full u-p-20  u-relative">
			<view class="u-flex u-col-top u-row-center">
				<text class="font-500">{{title}}</text>
				<u-icon class="close" name="close" @click="close"></u-icon>
			</view>

				 <view class="default">
				 			     <slot name="default"></slot>
				 </view>
			
			 <slot name="button">
              
				 <view class="u-flex u-row-between u-col-center w-full u-m-t-30">
					 
					 <view class="u-flex-1 u-flex u-row-center  u-p-l-40 u-p-r-40" v-if="cancelText" @click="close">
						 <view class="btn cancel">
						 	<text>{{cancelText}}</text>
						 </view>
					 </view>
					 <view class="u-flex-1 u-flex u-row-center u-p-l-40 u-p-r-40 " @click="confirm">
						 <view class="btn confirm">
						 	<text>{{confirmText}}</text>
						 </view>
					 </view>
				  
				 </view>
			 </slot>
			<view>
	
			</view>
		</view>
	</u-modal>
</template>

<script>
	export default {
		name:"shop-modal",
		props:{
				show:{
				 type:Boolean,
				 default:false
				},
				title:{
					type:String,
					default:'提示'
				},
				confirmText:{
					type:String,
					default:'确定'
				},
				cancelText:{
					type:String,
					default:'取消'
				}
				
		},
	
		data() {
			return {
				
			};
		},
		methods:{
			close()
			{
				this.$emit('close',false);
			},
			confirm()
			{
				this.$emit('confirm');
			}
		}
	}
</script>

<style scoped>
.close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	::v-deep .u-modal__content{
		padding: 0;
		padding-top:0px !important ;
	}
	.default{
		margin-top: 40rpx;
		min-height: 300rpx;
		width: 100%;
		display: flex;
		/* justify-content: center;
		align-items: center; */
		border-radius: 20rpx;
	}
	.btn
	{
	width: 100%;
	height: 72rpx;
	background: #F6F7F9;
	border-radius: 36rpx;
	opacity: 1;	
	display: flex;
	justify-content: center;
	align-items: center;
	/* box-shadow: 1rpx 1rpx 1rpx 1rpx #ccc; */
	}
	.cancel
	{
		background: #F6F7F9;
		
	}
	.confirm
	{
		
		background: #1D6AFF;
		color: #FFFFFF;
		
	}
</style>